<template>
  <div class="tutor-appointment-record">
    <div class="title">家教预约记录</div>
    <div class="applay-content">
      <div class="applay-entry"
        :class="{ r_class: cord.parent == user.username, 'w_class': cord.parent != user.username }"
        v-for="(cord, index) in cords" :key="index">
        <div class="applay-field1" style="margin-top: 10px;display: flex;margin-left: 2vw;">
          <img style="height: 50px;width: 50px;border-radius: 25px;margin-top: 10px;"
            @click="showUser(cord.parent, cord.id)" :src="`${ipAddress}/file/getPortrait/${cord.parent}`" alt="">
          <div style="margin-top: 15px;margin-left: 10px;"><span v-if="cord.parent == user.username" class="field-label"
              style="color: #fff;background-color:  #3e66eb;;border-radius: 10px;font-size: 13px;font-weight: bold;letter-spacing: 2px;">&nbsp;家长:&nbsp;</span>
            <span v-else class="field-label"
              style="color: #fff;background-color:  #eb3e3e;;border-radius: 10px;font-size: 13px;font-weight: bold;">&nbsp;教&nbsp;&nbsp;师:&nbsp;</span>
            <span v-if="cord.parent == user.username" class="field-label"
              style="color: #fff;background-color: #3e66eb;;border-radius: 10px;font-size: 13px;font-weight: bold;margin-left: 5px;">&nbsp;发布任务&nbsp;</span>
            <span v-else class="field-label"
              style="color: #fff;background-color:  #eb3e3e;;border-radius: 10px;font-size: 13px;font-weight: bold;margin-left: 5px;">&nbsp;兼职记录&nbsp;
            </span>
            <span style="font-size: 13px;font-weight: bold;" class="field-value"><br>{{ cord.parent }}</span>
          </div>
        </div>
        <div class="applay-field">
          <span class="field-label">开始日期:</span>
          <span class="field-value">{{ cord.startDate }}</span>
        </div>
        <div class="applay-field">
          <span class="field-label">结束日期:</span>
          <span class="field-value">{{ cord.endDate }}</span>
        </div>
        <div class="applay-field">
          <span class="field-label">薪&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;酬:</span>
          <span class="field-value">{{ cord.salary }}</span>
        </div>
        <div class="applay-field">
          <span class="field-label">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级:</span>
          <span class="field-value">{{ cord.grade }}</span>
        </div>
        <div class="applay-field">
          <span class="field-label">科&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;目:</span>
          <span class="field-value">{{ cord.subject }}</span>
        </div>
        <div class="applay-field">
          <span class="field-label">要&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;求:</span>
          <span class="field-value">{{ cord.demand }}</span>
        </div>
        <div class="applay-field">
          <span class="field-label">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:</span>
          <span class="field-value">{{ cord.shen }}省{{ cord.shi }}市{{ cord.xian }}区</span>
        </div>
        <div class="applay-field">
          <span class="field-label">街&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;道:</span>
          <span class="field-value">{{ cord.street }}</span>
        </div>
        <div class="applay-field">
          <span class="field-label">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话:</span>
          <span class="field-value">{{ cord.phone }}</span>
        </div>
        <div v-if="cord.comment == null && cord.parent == user.username && cord.isOrder == 1" class="applay-field">
          <div @click="updateComment(cord.id)" class="inputNav">&nbsp;发布评价:&nbsp;</div>
          <input :ref="`inputV${cord.id}`" type="text">
        </div>
        <div v-else class="applay-field">
          <span class="field-label">评&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价:</span>
          <span class="field-value">{{ cord.comment }}</span>
        </div>
        <div class="applay-field">
          <div v-if="cord.parent == user.username"
            style="width: 60vw;margin-left: 12vw;border-radius: 12px; background-color: #5f5f5f;" class="but"
            @click="deleteCord(cord.id)">删除该预任务记录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import settings from '../../settings.json';
export default {
  data() {
    return {
      cords: [],
      user: null,
      ipAddress: ''
    };
  },
  created() {
    this.ipAddress = settings.ipAddress;
    this.user = JSON.parse(localStorage.getItem("currentUser"));
    this.getOrders();
  },
  methods: {
    getOrders() {
      axios.get(settings.ipAddress + `/order/cords`,
        {
          params: {
            username: this.user.username,
          }
        }
      ).then(res => {
        this.cords = res.data
        console.log(res.data)
      })
    },
    deleteCord(id) {
      axios.get(settings.ipAddress + `/order/deleteCord`,
        {
          params: {
            id: id
          }
        }
      ).then(res => {
        alert("删除成功")
        this.getOrders()
      })
    },
    updateComment(id) {
      axios.get(settings.ipAddress + `/order/updateComment`,
        {
          params: {
            id: id,
            comment: this.$refs[`inputV${id}`][0].value
          }
        }
      ).then(res => {
        alert("评价成功")
        this.getOrders()
      })
    },
  },


};
</script>

<style scoped lang="scss">
$primary-color: #ffffff;
$secondary-color: #E8F5E9;
$text-color: #333;
$border-color: #C8E6C9;

.tutor-appointment-record {
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;

  .title {
    text-align: center;
    color: #333;
    height: 30px;
    width: 100vw;
    font-size: 22px;
    border-bottom: 1px solid #d3d3d3;
    font-weight: bold;
    background-color: #ffffff;
  }

  .applay-content::-webkit-scrollbar {
    display: none;
  }

  .applay-content {
    width: 100vw;
    position: fixed;
    // background-color: #dee6d8;
    top: 31px;
    height: calc(100vh - 91px);
    overflow: auto;

    .w_class {
      background-color: #e3dac1;
    }

    .r_class {
      background-color: #d9e6dd;
    }

    .applay-entry {
      border-bottom: 1px solid $border-color;
      width: 90vw;
      height: fit-content;
      margin-top: 10px;
      margin-left: 5vw;
      margin-bottom: 10px;
      // background-color: #ffffff;
      border-radius: 4px;

      .delete {
        height: 24px;
        width: 80px;
        text-align: center;
        background-color: #64656a;
        margin-top: 25px;
        margin-left: 5px;
        line-height: 24px;
        border-radius: 4px;
        font-size: 14px;
        color: #fff;
        // font-weight: bold;
      }

      .delete1 {
        background-color: #eb3e3e;
      }

      &:last-child {
        border-bottom: none;
      }



      .applay-field {
        span {
          border-bottom: 0.1px solid #000;
        }

        input {
          outline: none;
          border: none;
          margin-left: 10px;
          width: 60vw;
          height: 22px;
          border-radius: 3px;
        }

        .inputNav {
          border-radius: 3px;
          background-color: #b3a50d;
          font-size: 13px;
          height: 20px;
          line-height: 20px;
          font-weight: bold;
          color: white;
          margin-top: 2px;
        }

        // background-color: #f32929;
        display: flex;
        flex-wrap: wrap;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 84vw;
        max-width: 84vw;
        margin-left: 3vw;

        .field-label {
          flex: 0 0 30%;
          font-weight: bold;
          font-size: 13px;
          color: $text-color;
        }

        .field-value {
          flex: 0 0 70%;
          font-size: 13px;
          color: $text-color;
        }

        .but {
          margin-left: 30vw;
          width: 24vw;
          height: 24px;
          font-size: 14px;
          line-height: 24px;
          text-align: center;
          border-radius: 2px;
          color: #ffffff;
          margin-bottom: 5px;
          background-color: #fb0202;
        }
      }
    }
  }

}





.record-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.record-item {
  background-color: #fff;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.student-info,
.subject-info,
.time-info,
.status-info {
  display: flex;
  margin-bottom: 5px;
}

.student-name-label,
.subject-label,
.time-label,
.status-label {
  font-weight: bold;
  color: #555;
  min-width: 80px;
}

.student-name-value,
.subject-value,
.time-value,
.status-value {
  margin-left: 5px;
  color: #333;
}
</style>